Skip to main content

🌐 Browser Extension

AppStruct recognizes the challenges developers face when attempting to recreate complex UI components from existing websites. To address this, we developed the AppStruct Components Copying Extension, a Chrome browser extension that allows you to effortlessly replicate interface elements from any website directly into your AppStruct projects.

Installing the AppStruct Components Copying Extension​

Step 1: Access the Chrome Web Store

  1. Open Google Chrome: Ensure you are using the Google Chrome browser for compatibility.
  2. Navigate to the Chrome Web Store: Visit the Chrome Web Store.
  3. In the Chrome Web Store search bar, type "AppStruct Components Copying Extension".
  4. From the search results, locate the AppStruct Components Copying Extension. Click on the extension to open its details page.
  5. Click on the "Add to Chrome" button.
  6. A popup will appear requesting necessary permissions. Click "Add Extension" to proceed.
  7. Once installed, you will see the AppStruct extension icon (typically represented by the AppStruct logo) appear in the Chrome toolbar.
  8. Click on the puzzle piece icon (Extensions) located in the upper right corner of the Chrome browser.
  9. Click on the pin icon next to AppStruct extension to make the extension easily accessible in your toolbar.

Using the Extension​

With the extension installed and pinned, you can now effortlessly copy and integrate components from any website into your AppStruct projects. Follow the steps below to utilize the extension effectively:

  1. In your Chrome browser, go to the website containing the UI component you wish to copy.
  2. Hover your cursor over the desired UI component on the webpage.
  3. Right-click on the highlighted component to open the context menu.
  4. In the context menu, locate the AppStruct symbol with label "Copy Element". Click on it to initiate the copying process.
  5. Navigate back to your AppStruct dashboard and open the project where you want to paste the component.
  6. Click on the Canvas area representing your device screen where you wish to place the component.
  7. Right-click on the Canvas to open the context menu.
  8. Click on "Paste from Extension". The copied component will appear on your Canvas with the same styles and layout as it was on the original website.

Customize the Pasted Component​

  1. Adjust Position and Size:
    • Drag the component to your desired location on the Canvas. Resize by dragging the edges or setting specific percentage values.
  2. Modify Properties:
    • Click on the component to access the Left Toolbar and Right Toolbar.
    • Left Toolbar:
      • Add Actions: Define interactive behaviors by clicking "Add Action".
      • Set Styles for Specific Screen Sizes: Tailor the component’s appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, such as color, border style, shadow, and more.
      • Refer to the Components section for detailed customization instructions.

Best Practices​

To maximize the efficiency and effectiveness of the AppStruct Components Copying Extension, consider the following best practices:

  1. Maintain Consistent Design:
    • Ensure that copied components align with your app’s overall design scheme for a cohesive user experience.
  2. Customize Thoughtfully:
    • While the extension provides a quick way to copy components, always tailor them to meet your app’s specific functional and aesthetic requirements.
  3. Test Thoroughly:
    • After integrating copied components, thoroughly test their functionality and appearance across different devices and screen sizes.

Troubleshooting​

If you encounter any issues while using the AppStruct Components Copying Extension, refer to the solutions below:

Issue 1: Extension Not Visible in Browser

  • Solution:
    • Ensure the extension is installed and pinned to your Chrome toolbar.
    • If not visible, go to chrome://extensions/ and verify the extension is enabled.

Issue 2: Unable to Copy Elements

  • Solution:
    • Refresh the webpage and try copying the element again.
    • Delete extension and download it again.

Issue 3: Pasted Component Not Displaying Correctly

  • Solution:
    • Check if all necessary styles and scripts are properly loaded in AppStruct.
    • Manually adjust the component’s properties using the customization tools to align it with your app’s design.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!